//自定义吐司提示语

import { isEmpty } from '@/utils/httputils'
import { createApp, h } from 'vue'
import MyToast from './MyToast.vue'
import { log } from '@/utils/com'

export function toast(msg?: string): Promise<boolean> {
  return new Promise((resolve) => {
    if (isEmpty(msg)) {
      return
    }
    const container = document.createElement('div')
    document.body.appendChild(container)
    // 提前定义 destroyToast 函数
    const destroyToast = () => {
      app.unmount()
      container.remove()
    }

    const app = createApp({
      render() {
        return h(MyToast, {
          msg: msg,
          //在 Vue 3 中，自定义事件名会自动转换为 kebab-case（短横线连接），而你在组件中声明的是camelCase（驼峰命名）的onClickCallBack，
          // 但在父组件中需要使用对应的kebab-case名称on-on-click-call-back才能正确监听。
          onClose: (type: number) => {
            //0自动关闭，1手动关闭
            log('类型' + type)
            resolve(type === 1) // true为确定，false为取消
            destroyToast() // 正确调用销毁函数
          },
        })
      },
    })
    //挂载组件
    app.mount(container)
  })
}
